<template>
	<view class="warp">
		<view class="status_bar" style="background-color: #FFF;">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between; box-sizing: border-box;padding: 12rpx 16rpx;background-color: #FFF;align-items: center;" >
			<view style="display: flex;justify-content: space-between;align-items: center; box-sizing: border-box;">
				<view style="width: 72rpx;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
			</view>
			<view>
				<view style="font-size: 32rpx;color: #232426;margin-left: 16rpx;font-weight: 500;">{{user_info.nickname}}</view>
			</view>
			<view style="display: flex;justify-content: flex-end;box-sizing: border-box;">
				
			</view>
		</view>
		<view style="margin-top: 16rpx;">
			<view style="display: flex; justify-content: space-around;margin-top: 32rpx;padding: 0 24rpx;">
				<view>
					<view :class="{'type-item-active':type==1||type==3,'type-item':type==2}" @click="changeType(1)">
						追蹤中{{focusNum}}
					</view>
				</view>
				<view>
					<view :class="{'type-item-active':type==2,'type-item':type!=2}" @click="changeType(2)">
						粉絲{{fansNum}}
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 32rpx 24rpx;height: 800rpx;">
			<view v-if="type == 1">
				<view style="width:100%;border-top: 1rpx solid #F6F8FA;" @click="goTopicFn">
					<view style="display: flex;justify-content: space-between;align-items: center;padding:32rpx 24rpx;box-sizing: border-box;">
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view>
								<u-image
									src="/static/images/icon/topic.png"
									width="84rpx"
									height="84rpx"
									radius="50%"
								></u-image>
							</view>
							<view style="margin-left: 20rpx;">
								<view style="font-size: 28rpx;color: #020202;">已追蹤標籤</view>
								<view style="font-size: 20rpx;color: #BEC0C5;margin-top: 8rpx;" >46個標籤</view>
							</view>
						</view>
						<view>
							<u-image
								src="/static/images/icon/right-icon-2.png"
								width="48rpx"
								height="48rpx"
							></u-image>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in focus_list" :key="index" style="width:100%;border-top: 1rpx solid #F6F8FA;">
					<view style="display: flex;justify-content: space-between;align-items: center;padding:32rpx 24rpx;box-sizing: border-box;">
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view>
								<u-image
									:src="item.avatar"
									width="84rpx"
									height="84rpx"
									radius="50%"
								></u-image>
							</view>
							<view style="margin-left: 20rpx;">
								<view style="font-size: 28rpx;color: #020202;">{{item.nickname}}</view>
								<view style="font-size: 20rpx;color: #BEC0C5;margin-top: 8rpx;" >{{item.fans}} 人在追蹤</view>
							</view>
						</view>
						<view style="padding: 12rpx 20rpx;border:1rpx solid #E5E6E8; border-radius: 200rpx;background-color: #F6F8FA;color: #7A7B7E;display: inline-block;font-size:28rpx;">
							已追蹤
						</view>
					</view>
				</view>
			</view>
			<view v-if="type == 2">
				<view v-for="(item,index) in fans_list" :key="index" style="width:100%;border-top: 1rpx solid #F6F8FA;">
					<view style="display: flex;justify-content: space-between;align-items: center;padding:32rpx 24rpx;box-sizing: border-box;">
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view>
								<u-image
									:src="item.avatar"
									width="84rpx"
									height="84rpx"
									radius="50%"
								></u-image>
							</view>
							<view style="margin-left: 20rpx;">
								<view style="font-size: 28rpx;color: #020202;">{{item.nickname}}</view>
								<view style="font-size: 20rpx;color: #BEC0C5;margin-top: 8rpx;" >{{item.fans}} 人在追蹤</view>
							</view>
						</view>
						<view style="padding: 12rpx 20rpx;border:1rpx solid #E5E6E8; border-radius: 200rpx;background-color: #F6F8FA;color: #7A7B7E;display: inline-block;font-size:28rpx;">
							已追蹤
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { myFans, myFocus } from '@/config/api.js';
	
	export default {
		data() {
			return {
				type:1,//1追蹤，2粉絲
				user_info:{},
				//追蹤列表
				focusNum:'',
				focus_list:[{
					id:1,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'Magic___-',
					fans:'1,546 人在追蹤'
				}],
				//粉絲列表
				fans_list:[{
					id:1,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'Magic___-',
					fans:'1,546 人在追蹤'
				}],
				fansNum:''
			}
		},
		onLoad(option) {
			this.user_info = uni.getStorageSync('userInfo');
			if(option.type == 'fans'){
				this.type = 2;
				this.fans_list = [];
				this.getFans();
			} else {
				this.focus_list = [];
				this.getFocus()
			}
		},
		methods:{
			changeType(type){
				this.type = type;
				if(type == 2){
					this.fans_list = [];
					this.getFans();
				} else {
					this.focus_list = [];
					this.getFocus()
				}
			},
			goBack(){
				uni.navigateBack();
			},
			goTopicFn(){
				uni.navigateTo({
					url:'/pages/my/topic'
				})
			},
			//獲取追蹤列表
			getFocus(){
				let that = this;
				let data = {
					page:1,
					limit:10
				}
				uni.showLoading({
					icon:'none',
					title:'加載中...'
				})
				myFocus({data:data}).then((res) => {
					//success
					that.focus_list = that.focus_list.concat(res);
					// if(res.total > 0){
					// 	that.focusNum = res.total;
					// }
					uni.hideLoading();
				}).catch(() =>{
					
				})
			},
			//獲取粉絲列表
			getFans(){
				let that = this;
				let data = {
					page:1,
					limit:10
				}
				uni.showLoading({
					icon:'none',
					title:'加載中...'
				})
				myFans({data:data}).then((res) => {
					//success
					that.fans_list = that.fans_list.concat(res);
					if(res.total > 0){
						that.fansNum = res.total;
					}
					uni.hideLoading();
				}).catch(() =>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	min-height: 100vh;
	.type-item{
		color: #808690;
		font-size: 28rpx;
		line-height: 140%; /* 19.6px */
		letter-spacing: 0.28rpx;
		margin: 8rpx 24rpx;
		padding-bottom: 8rpx;
	}
	.type-item-active{
		color: #232426;
		font-size: 28rpx;
		line-height: 140%; /* 19.6px */
		letter-spacing: 0.28rpx;
		border-bottom: 4rpx solid #232426;
		font-weight: 600;
		margin: 8rpx 24rpx;
		padding-bottom: 8rpx;
	}
}
</style>